<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银行卡管理 - 护工助手</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/icons.css">
    <style>
        .page-header {
            background-color: #2B7DE1;
            color: white;
            padding: 12px 16px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .back-button {
            position: absolute;
            left: 16px;
            font-size: 20px;
            color: white;
        }
        
        .page-title {
            font-size: 17px;
            font-weight: 500;
        }
        
        .page-content {
            padding-top: 60px;
            padding-bottom: 80px;
        }
        
        .status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 16px;
            background-color: #2B7DE1;
        }
        
        .time {
            font-size: 14px;
            color: white;
        }
        
        .status-icons {
            display: flex;
            gap: 5px;
            color: white;
        }
        
        .icon {
            font-size: 14px;
        }

        .card-container {
            margin: 16px;
        }
        
        .bank-card {
            position: relative;
            border-radius: 12px;
            height: 180px;
            overflow: hidden;
            margin-bottom: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
        
        .card-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        .card-content {
            position: relative;
            z-index: 1;
            padding: 16px;
            height: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            color: white;
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
        }
        
        .bank-logo {
            font-size: 28px;
        }
        
        .card-type {
            font-size: 14px;
            opacity: 0.9;
        }
        
        .card-number {
            font-size: 18px;
            letter-spacing: 2px;
            margin-top: 20px;
        }
        
        .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }
        
        .card-name {
            font-size: 14px;
        }
        
        .card-expire {
            font-size: 12px;
            opacity: 0.9;
        }
        
        .card-default {
            position: absolute;
            top: 12px;
            right: 12px;
            background-color: rgba(255, 255, 255, 0.2);
            padding: 4px 8px;
            border-radius: 10px;
            font-size: 12px;
            color: white;
            backdrop-filter: blur(2px);
        }
        
        .card-actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: -10px;
            margin-bottom: 20px;
            padding-right: 10px;
        }
        
        .card-action {
            font-size: 13px;
            color: #666;
            cursor: pointer;
        }
        
        .add-card-button {
            background-color: #f0f0f0;
            border: 1px dashed #ccc;
            border-radius: 12px;
            height: 180px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            flex-direction: column;
            cursor: pointer;
        }
        
        .add-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #eee;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-bottom: 12px;
        }
        
        .section-title {
            font-size: 16px;
            font-weight: 500;
            margin: 24px 16px 16px;
            color: #333;
        }
        
        .tips-card {
            margin: 16px;
            padding: 16px;
            background-color: #f9f9f9;
            border-radius: 12px;
        }
        
        .tips-title {
            font-size: 15px;
            font-weight: 500;
            margin-bottom: 10px;
            color: #333;
        }
        
        .tips-list {
            padding-left: 16px;
            font-size: 14px;
            color: #666;
            line-height: 1.6;
        }
        
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: none;
        }
        
        .modal-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
            padding: 20px;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .modal-title {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .close-button {
            position: absolute;
            right: 20px;
            top: 20px;
            font-size: 20px;
            color: #999;
        }
        
        .form-group {
            margin-bottom: 16px;
        }
        
        .form-label {
            display: block;
            font-size: 15px;
            margin-bottom: 8px;
            color: #333;
        }
        
        .form-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 15px;
            box-sizing: border-box;
        }
        
        .form-input:focus {
            border-color: #2B7DE1;
            outline: none;
        }
        
        .input-row {
            display: flex;
            gap: 12px;
        }
        
        .input-row .form-group {
            flex: 1;
        }
        
        .action-button {
            background-color: #2B7DE1;
            color: white;
            border: none;
            padding: 14px 20px;
            border-radius: 6px;
            font-size: 16px;
            width: 100%;
            margin-top: 20px;
            cursor: pointer;
        }
        
        .action-button:disabled {
            background-color: #d0d0d0;
            color: #999;
            cursor: not-allowed;
        }
        
        .message-box {
            background-color: #f8f8f8;
            border-left: 4px solid #2B7DE1;
            padding: 12px 16px;
            margin-bottom: 16px;
            font-size: 14px;
            color: #666;
        }
        
        .bank-selector {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 16px;
        }
        
        .bank-option {
            padding: 12px 8px;
            text-align: center;
            border: 1px solid #eee;
            border-radius: 6px;
            cursor: pointer;
        }
        
        .bank-option.selected {
            border-color: #2B7DE1;
            background-color: #f0f7ff;
        }
        
        .bank-icon {
            font-size: 24px;
            margin-bottom: 6px;
        }
        
        .bank-name {
            font-size: 12px;
        }
        
        .card-delete-confirm {
            background-color: white;
            border-radius: 12px;
            padding: 20px;
            max-width: 300px;
            text-align: center;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1001;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            display: none;
        }
        
        .confirm-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 16px;
        }
        
        .confirm-message {
            font-size: 14px;
            color: #666;
            margin-bottom: 20px;
        }
        
        .confirm-buttons {
            display: flex;
            gap: 12px;
        }
        
        .confirm-button {
            flex: 1;
            padding: 10px 0;
            border-radius: 6px;
            border: none;
            font-size: 15px;
            cursor: pointer;
        }
        
        .cancel-button {
            background-color: #f0f0f0;
            color: #333;
        }
        
        .delete-button {
            background-color: #FF3B30;
            color: white;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 顶部状态栏 -->
        <div class="status-bar">
            <span class="time">10:25</span>
            <div class="status-icons">
                <span class="icon">📶</span>
                <span class="icon">📡</span>
                <span class="icon">🔋</span>
            </div>
        </div>
        
        <!-- 页面头部 -->
        <header class="page-header">
            <a href="profile.html" class="back-button">←</a>
            <div class="page-title">银行卡管理</div>
        </header>
        
        <div class="page-content">
            <div class="card-container">
                <!-- 招商银行卡 -->
                <div class="bank-card">
                    <div class="card-background" style="background: linear-gradient(135deg, #1a237e, #3f51b5);"></div>
                    <div class="card-content">
                        <div class="card-header">
                            <div class="bank-logo">🏦</div>
                            <div class="card-type">储蓄卡</div>
                        </div>
                        <div class="card-number">**** **** **** 8888</div>
                        <div class="card-footer">
                            <div class="card-name">张三</div>
                            <div class="card-expire">有效期：12/25</div>
                        </div>
                        <div class="card-default">默认</div>
                    </div>
                </div>
                <div class="card-actions">
                    <div class="card-action" onclick="setDefault('8888')">设为默认</div>
                    <div class="card-action" onclick="confirmDeleteCard('8888')">删除</div>
                </div>
                
                <!-- 工商银行卡 -->
                <div class="bank-card">
                    <div class="card-background" style="background: linear-gradient(135deg, #b71c1c, #f44336);"></div>
                    <div class="card-content">
                        <div class="card-header">
                            <div class="bank-logo">🏦</div>
                            <div class="card-type">储蓄卡</div>
                        </div>
                        <div class="card-number">**** **** **** 5678</div>
                        <div class="card-footer">
                            <div class="card-name">张三</div>
                            <div class="card-expire">有效期：10/24</div>
                        </div>
                    </div>
                </div>
                <div class="card-actions">
                    <div class="card-action" onclick="setDefault('5678')">设为默认</div>
                    <div class="card-action" onclick="confirmDeleteCard('5678')">删除</div>
                </div>
                
                <!-- 添加新卡 -->
                <div class="add-card-button" onclick="openAddCardModal()">
                    <div class="add-icon">+</div>
                    <div>添加银行卡</div>
                </div>
            </div>
            
            <div class="section-title">银行卡使用说明</div>
            
            <div class="tips-card">
                <div class="tips-title">常见问题</div>
                <ul class="tips-list">
                    <li>银行卡必须为本人实名认证的卡，否则将无法提现</li>
                    <li>最多可以绑定5张银行卡</li>
                    <li>更换银行卡需要验证身份信息</li>
                    <li>为了资金安全，请勿将银行卡信息告知他人</li>
                </ul>
            </div>
            
            <div class="tips-card">
                <div class="tips-title">支持的银行</div>
                <ul class="tips-list">
                    <li>招商银行、工商银行、建设银行、农业银行</li>
                    <li>中国银行、交通银行、邮政储蓄银行</li>
                    <li>浦发银行、民生银行、兴业银行等</li>
                </ul>
            </div>
        </div>
        
        <!-- 底部导航栏 -->
        <nav class="bottom-nav">
            <a href="index.html" class="nav-item">
                <span class="nav-icon">🏠</span>
                <span>首页</span>
            </a>
            <a href="signin-center.html" class="nav-item">
                <span class="nav-icon">✓</span>
                <span>签到中心</span>
            </a>
            <a href="orders.html" class="nav-item">
                <span class="nav-icon">📋</span>
                <span>订单中心</span>
            </a>
            <a href="profile.html" class="nav-item active">
                <span class="nav-icon">👤</span>
                <span>我的</span>
            </a>
        </nav>
        
        <!-- 添加银行卡模态框 -->
        <div class="modal" id="addCardModal">
            <div class="modal-content">
                <div class="modal-title">添加银行卡</div>
                <div class="close-button" onclick="closeModal()">✕</div>
                
                <div class="form-group">
                    <label class="form-label">银行</label>
                    <div class="bank-selector">
                        <div class="bank-option" onclick="selectBank(this, '招商银行')">
                            <div class="bank-icon">🏦</div>
                            <div class="bank-name">招商银行</div>
                        </div>
                        <div class="bank-option" onclick="selectBank(this, '工商银行')">
                            <div class="bank-icon">🏦</div>
                            <div class="bank-name">工商银行</div>
                        </div>
                        <div class="bank-option" onclick="selectBank(this, '建设银行')">
                            <div class="bank-icon">🏦</div>
                            <div class="bank-name">建设银行</div>
                        </div>
                        <div class="bank-option" onclick="selectBank(this, '农业银行')">
                            <div class="bank-icon">🏦</div>
                            <div class="bank-name">农业银行</div>
                        </div>
                        <div class="bank-option" onclick="selectBank(this, '中国银行')">
                            <div class="bank-icon">🏦</div>
                            <div class="bank-name">中国银行</div>
                        </div>
                        <div class="bank-option" onclick="selectBank(this, '交通银行')">
                            <div class="bank-icon">🏦</div>
                            <div class="bank-name">交通银行</div>
                        </div>
                    </div>
                    <input type="hidden" id="selectedBank" value="">
                </div>
                
                <div class="form-group">
                    <label class="form-label">卡号</label>
                    <input type="text" class="form-input" id="cardNumber" placeholder="请输入银行卡号" maxlength="19" oninput="formatCardNumber(this)">
                </div>
                
                <div class="input-row">
                    <div class="form-group">
                        <label class="form-label">持卡人</label>
                        <input type="text" class="form-input" id="cardHolder" placeholder="请输入持卡人姓名" readonly value="张三">
                    </div>
                    <div class="form-group">
                        <label class="form-label">有效期</label>
                        <input type="text" class="form-input" id="cardExpiry" placeholder="月/年" maxlength="5" oninput="formatCardExpiry(this)">
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="form-label">手机号</label>
                    <input type="tel" class="form-input" placeholder="请输入银行预留手机号" value="138****1234" readonly>
                </div>
                
                <div class="form-group">
                    <label class="form-label">验证码</label>
                    <div style="display: flex; gap: 10px;">
                        <input type="text" class="form-input" placeholder="请输入短信验证码" style="flex: 1;">
                        <button style="padding: 0 15px; background: #f0f0f0; border: none; border-radius: 6px; color: #333; white-space: nowrap;" onclick="sendVerificationCode()">获取验证码</button>
                    </div>
                </div>
                
                <div class="message-box">
                    请绑定您本人的银行卡，确保姓名与实名认证信息一致，否则将导致提现失败。
                </div>
                
                <button class="action-button" onclick="addCard()">确认添加</button>
            </div>
        </div>
        
        <!-- 删除确认框 -->
        <div class="card-delete-confirm" id="deleteConfirm">
            <div class="confirm-title">删除银行卡</div>
            <div class="confirm-message">确定要删除尾号为 <span id="cardToDelete">8888</span> 的银行卡吗？</div>
            <div class="confirm-buttons">
                <button class="confirm-button cancel-button" onclick="cancelDelete()">取消</button>
                <button class="confirm-button delete-button" onclick="deleteCard()">删除</button>
            </div>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 更新顶部时间
            function updateTime() {
                const now = new Date();
                const hours = now.getHours().toString().padStart(2, '0');
                const minutes = now.getMinutes().toString().padStart(2, '0');
                document.querySelector('.time').textContent = `${hours}:${minutes}`;
            }
            
            updateTime();
            setInterval(updateTime, 60000);
        });
        
        // 打开添加银行卡模态框
        function openAddCardModal() {
            document.getElementById('addCardModal').style.display = 'block';
            document.body.style.overflow = 'hidden';
        }
        
        // 关闭模态框
        function closeModal() {
            document.getElementById('addCardModal').style.display = 'none';
            document.body.style.overflow = 'auto';
        }
        
        // 格式化银行卡号输入
        function formatCardNumber(input) {
            let value = input.value.replace(/\D/g, '');
            let formattedValue = '';
            
            for (let i = 0; i < value.length; i++) {
                if (i > 0 && i % 4 === 0) {
                    formattedValue += ' ';
                }
                formattedValue += value[i];
            }
            
            input.value = formattedValue;
        }
        
        // 格式化有效期输入
        function formatCardExpiry(input) {
            let value = input.value.replace(/\D/g, '');
            
            if (value.length > 2) {
                input.value = value.substring(0, 2) + '/' + value.substring(2);
            } else {
                input.value = value;
            }
        }
        
        // 选择银行
        function selectBank(elem, bankName) {
            // 清除其他选中状态
            document.querySelectorAll('.bank-option').forEach(option => {
                option.classList.remove('selected');
            });
            
            // 设置当前选中
            elem.classList.add('selected');
            document.getElementById('selectedBank').value = bankName;
        }
        
        // 发送验证码
        function sendVerificationCode() {
            showToast('验证码已发送到您的手机');
        }
        
        // 添加银行卡
        function addCard() {
            const bank = document.getElementById('selectedBank').value;
            const cardNumber = document.getElementById('cardNumber').value.replace(/\s/g, '');
            const expiry = document.getElementById('cardExpiry').value;
            
            // 简单验证
            if (!bank) {
                showToast('请选择银行');
                return;
            }
            
            if (!cardNumber || cardNumber.length < 16) {
                showToast('请输入正确的银行卡号');
                return;
            }
            
            if (!expiry || expiry.length < 5) {
                showToast('请输入有效期');
                return;
            }
            
            // 模拟提交
            showToast('正在验证银行卡信息...');
            setTimeout(() => {
                closeModal();
                showToast('银行卡添加成功');
                setTimeout(() => {
                    location.reload(); // 刷新页面以显示新卡
                }, 1500);
            }, 1500);
        }
        
        // 设为默认卡
        function setDefault(cardNumber) {
            showToast(`已将尾号${cardNumber}的银行卡设为默认提现卡`);
            setTimeout(() => {
                location.reload(); // 刷新页面以更新状态
            }, 1500);
        }
        
        // 确认删除卡
        function confirmDeleteCard(cardNumber) {
            document.getElementById('cardToDelete').textContent = cardNumber;
            document.getElementById('deleteConfirm').style.display = 'block';
            document.querySelector('.modal').style.display = 'block';
        }
        
        // 取消删除
        function cancelDelete() {
            document.getElementById('deleteConfirm').style.display = 'none';
            document.querySelector('.modal').style.display = 'none';
        }
        
        // 删除卡
        function deleteCard() {
            const cardNumber = document.getElementById('cardToDelete').textContent;
            document.getElementById('deleteConfirm').style.display = 'none';
            document.querySelector('.modal').style.display = 'none';
            
            showToast(`正在删除尾号${cardNumber}的银行卡...`);
            setTimeout(() => {
                showToast('银行卡已删除');
                setTimeout(() => {
                    location.reload(); // 刷新页面以更新列表
                }, 1500);
            }, 1500);
        }
        
        // 轻提示
        function showToast(message) {
            // 检查是否已有toast
            let toast = document.querySelector('.toast');
            if (toast) {
                toast.remove();
            }
            
            // 创建新的toast
            toast = document.createElement('div');
            toast.className = 'toast';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            // 样式
            toast.style.position = 'fixed';
            toast.style.left = '50%';
            toast.style.bottom = '10%';
            toast.style.transform = 'translateX(-50%)';
            toast.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
            toast.style.color = 'white';
            toast.style.padding = '10px 20px';
            toast.style.borderRadius = '20px';
            toast.style.fontSize = '14px';
            toast.style.zIndex = '9999';
            toast.style.opacity = '0';
            toast.style.transition = 'opacity 0.3s';
            
            // 显示和自动隐藏
            setTimeout(() => {
                toast.style.opacity = '1';
            }, 10);
            
            setTimeout(() => {
                toast.style.opacity = '0';
                setTimeout(() => {
                    toast.remove();
                }, 300);
            }, 2000);
        }
    </script>
</body>
</html> 